<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>微信服务器配置</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">员工分组</div>
                        <div class="layui-card-body">
                            <div class="layui-form layui-form-pane">
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">员工分组</label>
                                    <div class="layui-input-block">
                                        <br>
                                        <div class="layui-btn-container tag" lay-filter="demo" lay-allowclose="true"
                                             lay-newTag="true">
                                            <span id="tags_wrap"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <a class="layui-btn" lay-submit lay-filter="formSubmit">确认修改</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var maxId = 0
        layui.config({
            base: '../assets/layui/' //存放拓展模块的根目录
        }).extend({ //设定模块别名
            tag: 'tag'
        }).use(['tag', 'form', 'layer'], function (form) {
            var $ = layui.jquery
                , tag = layui.tag; //Tag的切换功能，切换事件监听等，需要依赖tag模块
            form = layui.form

            form.render()
            service.get('mfconfig').then((response) => {
                if (response.data) {
                    var data = response.data
                    data.forEach((e) => {
                        if (e.id === 1) {
                            var groups = JSON.parse(e.values)
                            var html = ''
                            if (groups.length > 0) {
                                groups.forEach(o => {
                                    if (o.id > maxId) {
                                        maxId = o.id
                                    }
                                    html += '<button id="' + o.id + ' type="button" class="tag-item layui-btn layui-btn-primary layui-btn-sm">' + o.name + '<i class="layui-icon layui-unselect tag-close">ဆ</i></button>'
                                })
                            }
                            $('#tags_wrap').html(html)
                        }
                    })
                } else {
                    layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                }
            }).catch((err) => {
                layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
            })

            //指定渲染 lay-filter="test" 圆角风格的TAG
            tag.render("demo", {
                skin: 'layui-btn layui-btn-primary layui-btn-sm',//标签样式
                tagText: '<i class="layui-icon layui-icon-add-1"></i>添加分组' //标签添加按钮提示文本
            });

            $('#tags_wrap').on('click', '.tag-close', function () {
                $(this).parent('.tag-item').remove()
            })

            //监听提交
            form.on('submit(formSubmit)', function (data) {
                var elems = $('.layui-btn-container .tag-item')
                console.log(elems)
                var param = []
                if (elems.length > 0) {
                    for (let i = 0; i < elems.length; i++) {
                        const o = elems[i]
                        let temp = {id: 0, name: ''}
                        temp.name = $(o).text().slice(0, -1)
                        if ($(o).attr('id')) {
                            temp.id = $(o).attr('id')
                        } else {
                            temp.id = maxId
                            maxId++
                        }
                        param.push(temp)
                    }
                }
                service.post('api/v1/sys/mfconfig', {
                    id: 1,
                    values: JSON.stringify(param)
                }).then((response) => {
                    if (response.code === 200) {
                        layer.msg('保存成功', {offset: '45vh', icon: 1, time: 2000});
                    } else {
                        layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                    }
                }).catch((err) => {
                    layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                })
                return false;
            });
        });
    </script>
</div>
</body>
</html>
